<template>
  <view class="stock-table">
    <t-table v-if="stockList.length > 0">
      <!-- 表头 -->
      <t-tr>
        <t-th>
          转债
        </t-th>
        <t-th>
          现价/涨跌
        </t-th>
        <t-th>
          转股/溢价
        </t-th>
        
        <t-th>
          持仓
        </t-th>
        <t-th>
          收益
        </t-th>
        <t-th>
          操作
        </t-th>
      </t-tr>
      
      <!-- 表格内容区域 -->
      <t-tr v-for="item in stockList" :key='item.code' :class="item.is_danger?'danger':''">
        <t-td>
          <!-- 名字、代码 -->
          {{item.name.replace('转债','')}}
          {{item.code}}
        </t-td>
        <t-td :class="item.increase_rt<0?'green':'red'">
          <!-- 现价/涨跌 -->
          {{item.price}}
          {{(item.increase_rt * 100).toFixed(2)}}%
        </t-td>
        <t-td>
          <!-- 转股价值/溢价率 -->
          {{item.convert_value}}
          {{item.premium_rt}}
        </t-td>
        
        <t-td>
          <!-- 持仓 -->
          {{item.purchase_price}}
          ({{item.hold_quantity}})
        </t-td>
        <t-td :class="item.profit_rt<0?'green':'red'">
          <!-- 收益 -->
          {{item.profit}}
          {{(item.profit_rt*100).toFixed(2)}}%
        </t-td>
        <t-td>
          <view class="operate" @click.native='toDelete(item)'>轮出</view>
        </t-td>
      </t-tr>
      
    </t-table>
    <view class="no-stock" v-else>
      暂无数据，去<navigator class="navigator" url="/pages/stock/addStock/addStock">添加</navigator>,或者去<navigator class="navigator" url="/pages/stock/changeStock/index">一键换仓</navigator>
    </view>
    <u-popup v-model="showOutForm" mode="center" border-radius="14" length="auto">
      <view class="popupArea">
        <view class="">
          将要卖出
          <input class="input" type="number" v-model="sellNum" />
          只{{activeStock.name}}({{activeStock.code}})，是否继续？
        </view>
        <view class="btnArea">
          <button type="default" size="mini" @click="showOutForm = false">取消</button>
          <button type="primary" size="mini" @click="confirmSell">确认</button>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
  import tTable from '@/components/t-table/t-table.vue'
  import tTr from '@/components/t-table/t-tr.vue'
  import tTh from '@/components/t-table/t-th.vue'
  import tTd from '@/components/t-table/t-td.vue'
  
  import { createNamespacedHelpers } from 'vuex'
  const { mapState, mapActions } = createNamespacedHelpers('stock')
  
  import { deleteStock } from '../_api/index.js'
  
  export default {
    components: {
      tTable,
      tTr,
      tTh,
      tTd
    },
    data() {
      return {
        showOutForm: false,
        activeStock: {},
        sellNum: 1
      }
    },
    computed: {
      ...mapState(['stockList'])
    },
    
    methods:{
      ...mapActions(['getStockListReq']),
      toDelete (item) {
        this.showOutForm = true
        this.activeStock = item
      },
      
      confirmSell() {
        if (!this.sellNum || (!Number(this.sellNum))) {
          return uni.showToast({
            title: '请输入大于1的正整数'
          })
        }
        const data = {
          delete_info: [{
            id: this.activeStock.id,
            num: this.sellNum
          }]
        }
        // 调用删除持仓的接口
        deleteStock(data)
          .then(() => {
            this.getStockListReq()
            this.showOutForm = false
          })
          .catch(_ => {})
      }
    }
  }
</script>

<style lang="scss" scoped>
  .danger {
    background-color: orange!important;
  }
  .stock-table {
    width: 690rpx;
    margin: 10rpx auto;
    box-shadow: 0 0 10rpx #333;
    border-radius: 10rpx;
  }
  .navigator {
    display: inline-block;
    color: blue;
  }
  .operate {
    color: blue;
  }
  .no-stock {
    padding: 5rpx 36rpx;
    font-size: 30rpx;
  }
  .red {
    color: red;
  }
  .green {
    color: green;
  }
  .input {
    width: 50rpx;
    border-bottom: 2rpx solid #000;
  }
  .popupArea {
    padding: 50rpx;
    width: 500rpx;
    text-align: center;
    .btnArea {
      display: flex;
      justify-content: space-between;
    }
  }
</style>
